<template>
    <section class="group-item">
      <div class="inner">
          <div class="thumbs" style="width: 147px;height: 99px">
              <div style="width: 64px;height: 64px;margin: 0 auto">
                  <img :src="$Url+data.image" alt="thumbs">
              </div>
          </div>
          <div class="details ">
            <p class="title" style="height: 24px">{{data.name}}</p>
            <p class="location" v-if="type === 2">
                <span class="pink"><Icon type="md-locate" /></span>
                江苏省徐州市
            </p>
            <p class="creator" >创建人：<span class="pink">{{data.username}}</span></p>
            <p class="creator" v-if="type === 2">圈主：<span class="pink" >{{data.creator}}</span></p>
            <p class="count" v-if="type===1 || type===2">
                会员：<span class="pink">{{data.usersum}} 人</span>
            </p>
            <!--<p v-if="type === 2">主题：主题主题主题主题主题主题</p>-->
            <div v-if="type === 1" style="margin-top: 5px">
                <div  v-if="data.type === 1">
                    <Button type="primary" long @click="manage(data.id)">管理</Button>
                </div>
                <div v-if="data.type === 2">
                    <Button type="primary" long>进入</Button>
                </div>
            </div>
              <p v-if="type === 3">
                  <span class="pink">未通过审核的原因:</span>
                 {{data.weireason}}
              </p>
              <p v-if="type === 4">
                  <span class="pink">被投诉的原因:</span>
                  {{data.complaintreason}}
              </p>
              <div v-if="type === 3">
                  <div class="option-btn">
                      <span class="btn">编辑</span>
                      <span class="btn">删除</span>
                  </div>
              </div>
          </div>
      </div>
    </section>
</template>

<script>
    /**
     * @type
     * type = 1 列表
     * type = 2 已审核
     * type = 3 未通过审核
     * type = 4 被投诉的
     * **/
export default {
  name: 'GroupItem',
    props: {
        data: {
            type: Object,
            required: true
        },
        type: {

        }
    },
        methods :{
           manage (id) {
               this.$router.push({path:'/my/mygroup/groupmanage',query:{id:id}})
           }
        }
}
</script>

<style scoped lang="less">
  @import "../../style/style.less";
  .group-item {
      .inner {
          padding: 10px;
          .thumbs {
              line-height: 1;
              font-size: 0;
              text-align: center;
              padding: 20px 0 15px;
              border-right: 1px solid @border-color;
              &:nth-child(4n) {
                  border-right: 1px solid transparent;
              }
              img {
                  width: 64px;
                  height: 64px;
                  border-radius: 50%;
              }
              .pop {
                  width: 64px;
                  height: 64px;
                  background-color: rgba(0,0,0,.5);
                  border-radius: 50%;
                  position: absolute;
                  /*top: 0;*/
                  margin-top: -64px;
                  margin-left: 41px;
              }
          }
          .details {
              .title {
                  font-size: 16px;
                  color: @theme-color-dark;
                  text-align: center;
              }
              .location {
                  font-size: 12px;
                  color: #999;
                  text-align: center;
              }
              .creator, .count {
                  /*margin-bottom: 10px;*/
              }
              .option-btn {
                  text-align: center;
                  margin-top: 10px;
                  .btn {
                      display: inline-block;
                      border: 1px solid @theme-color;
                      height: 28px;
                      line-height: 28px;
                      padding: 0 15px;
                      color: @theme-color;
                      border-radius: 4px;
                      margin-right: 10px;
                  }
              }
          }
      }
  }
</style>
